<%--
  Created by IntelliJ IDEA.
  User: 施明
  Date: 2019/5/21
  Time: 20:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 主页示例模板二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layuiadmin/style/admin.css" media="all">
</head>

<body>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    注册人数
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${q}</p>
                    <p>
                        总计注册人数
                        <span class="layuiadmin-span-color">${u} <i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单数
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${w}</p>
                   <p>
                        订单总数
                        <span class="layuiadmin-span-color">${t}<i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    秒杀商品数量
                    <span class="layui-badge layui-bg-green layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">${h}</p>
                   <p>
                        秒杀商品总数
                        <span class="layuiadmin-span-color">${z} <i class="layui-inline layui-icon layui-icon-cellphone"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    收入资产
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">${p}</p>
                   <p>
                        总收入
                        <span class="layuiadmin-span-color">${y} <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <!--
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    访问量
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">去年</a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今年</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm8">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo">
                                <div carousel-item id="LAY-index-pagetwo">
                                    <div > <i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月访问数</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="30%"></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月下载数</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="20%"></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月收入</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                    <div class="layui-progress-bar" lay-percent="25%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
-->
        <div class="layui-col-sm8">
            <div class="layui-row layui-col-space15" >


                <div class="layui-col-sm12">
                    <div class="layui-card" id="container"  style="height: 360px;width: 90%;">
                        <!--             <div class="layui-card-header">用户全国分布</div>
                                     <div class="layui-card-body">
                                         <div class="layui-row layui-col-space15">
                                             <div class="layui-col-sm4">
                                                 <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                                     <thead>
                                                     <tr>
                                                         <th>排名</th>
                                                         <th>地区</th>
                                                         <th>人数</th>
                                                     </tr>
                                                     </thead>
                                                     <tbody>
                                                     <tr>
                                                         <td>1</td>
                                                         <td>浙江</td>
                                                         <td>62310</td>
                                                     </tr>
                                                     <tr>
                                                         <td>2</td>
                                                         <td>上海</td>
                                                         <td>59190</td>
                                                     </tr>
                                                     <tr>
                                                         <td>3</td>
                                                         <td>广东</td>
                                                         <td>55891</td>
                                                     </tr>
                                                     <tr>
                                                         <td>4</td>
                                                         <td>北京</td>
                                                         <td>51919</td>
                                                     </tr>
                                                     <tr>
                                                         <td>5</td>
                                                         <td>山东</td>
                                                         <td>39231</td>
                                                     </tr>
                                                     <tr>
                                                         <td>6</td>
                                                         <td>湖北</td>
                                                         <td>37109</td>
                                                     </tr>
                                                     </tbody>
                                                 </table>
                                             </div>
                                             <div class="layui-col-sm8">

                                                 <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagethree">
                                                     <div carousel-item id="LAY-index-pagethree">
                                                         <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                                     </div>
                                                 </div>

                                             </div>
                                         </div>
                                     </div>
                                     -->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
</div>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<!--       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="${path}/layuiadmin/layui/layui.js"></script>


<script>

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var data = genData(10);

    option = {
        title : {
            text: '秒杀本周销售情况',
            subtext: '按各大分类进行统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData


        },
        series : [
            {
                name: '类别',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };




    function genData(count) {
        $.ajaxSetup({async : false});
        //**************Ajax获取统计数据****************
        var msgData;
        $.ajax({
            url: "/adminflashorder.action/statisticsweekflashincome",
            type: "GET",
            dataType: "json",
            success: function (datamsg) {
                msgData = datamsg;
            },
            error: function () {
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    layer.msg("客户端请求异常", {icon: 2, time: 1200});
                })

            }
        })


        //***************Ajax获取统计数据结束************
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < msgData.length; i++) {
            legendData.push(msgData[i].onelevelname);
            seriesData.push({
                name: msgData[i].onelevelname,
                value: msgData[i].subtotal
            });
            selected[msgData[i].onelevelname] = i <  msgData.length;
        }

        return {
            legendData: legendData,
            seriesData: seriesData,
            selected: selected
        };
    }
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


<script>

    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'sample']);
</script>


</body>
</html>